<script setup name="app">
import { reactive, ref } from "vue";
const state = reactive({
  sucaiArray: ["AAAAA", "AAAAA", "AAAAA", "AAAAA"],
  mainArrAy: [
    { title: "主题", data: ["科幻", "言情", "武侠"] },
    { title: "风格", data: ["幽默", "严谨", "严肃"] },
    { title: "语言模型", data: ["ChatGML", "文心一言"] },
  ],

  sucaiStatus: true,
  sucaiRef: "",
  // 关键词数组
  SelectArray: [],
});

const onSucai = () => {
  state.sucaiStatus = !state.sucaiStatus;
};

// 添加素材数据
const addsucai1shuju = () => {
  if (state.sucaiRef !== "") {
    state.sucaiArray.push(state.sucaiRef);
  }
  state.sucaiStatus = true;
  state.sucaiRef = "";
};

// 获取关键词
const onSelectItem = (ItemText) => {
  if (state.SelectArray.length < 1) {
    state.SelectArray.push(ItemText);
  } else {
    state.SelectArray.forEach((item) => {
      if (item != ItemText && state.SelectArray.indexOf(ItemText) == -1) {
        state.SelectArray.push(ItemText);
      }
    });
  }
};
// 双击取消
const onDblSelectItem = (ItemText) => {
  let index = state.SelectArray.findIndex((item) => item === ItemText);
  state.SelectArray.splice(index, 1);
  console.log(state.SelectArray);
};
const addActive = (itemText) => {
  let flag = false;
  state.SelectArray.map((item) => {
    if (item === itemText) {
      flag = true;
    }
  });

  return flag;
};

// 生成
const CreateDoc = () => {
  console.log("提交生成的关键词=>", state.SelectArray);
};
</script>

<template>
  <div class="constain">
    <div class="constain__header">
      <h2>创意工厂</h2>
    </div>
    <div class="main_contain">
      <div class="main_left">
        <h4>素材库</h4>
        <div class="main_left_contain">
          <ul class="main_left_contain_ul">
            <li
              class="main_left_contain_li"
              v-for="(item, index) in state.sucaiArray"
            >
              {{ `${index + 1}、${item}` }}
            </li>
          </ul>
          <ul>
            <li
              class="main_left_contain_li_button"
              @click="onSucai"
              v-if="state.sucaiStatus"
            >
              +
            </li>
            <input
              v-model="state.sucaiRef"
              type="text"
              v-else
              @keyup.enter="addsucai1shuju"
            />
          </ul>
        </div>
      </div>
      <div class="main_right">
        <div class="main_right_select" v-for="(item, index) in state.mainArrAy">
          <h5>{{ item.title }}</h5>
          <div class="main_right_select_contain">
            <span
              class="main_right_select_contain_span"
              v-for="item2 in item.data"
              @click="onSelectItem(item2)"
              @dblclick="onDblSelectItem(item2)"
              :class="{ spanActive: state.SelectArray.indexOf(item2) != -1 }"
              >{{ item2 }}</span
            >
          </div>
        </div>

        <div class="main_right_select">
          <button class="main_right_select_createBtn" @click="CreateDoc">
            生成
          </button>
        </div>
        <div class="main_right_select fabu">
          <button class="main_right_select_fabuBtn">发布至...</button>
          <div class="main_right_select_duankou">
            <ul>
              <li class="main_right_select_duankou_item">小红书</li>
              <li class="main_right_select_duankou_item">抖音</li>
              <li class="main_right_select_duankou_item">B站</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

/* 主体 */
.constain {
  /* border: 1px solid red; */
  width: 800px;
  margin: auto;
  transform: translateX(200px);
  padding: 20px;
  background-color: #e4f1f0;
  user-select: none;
}
/* 头部 */
.constain__header {
  margin-bottom: 10px;
  h2 {
  }
}
/* 左侧主体 */

.main_contain {
  width: 100%;
  display: flex;
}
.main_left {
  flex: 1;
  min-width: 500px;
  /* width: 500px; */
  border: 1px solid black;
  margin-right: 20px;
}
.main_left_contain {
  /* padding: 0 10px; */
}
.main_left_contain_li {
  margin: 8px 0;
  border-bottom: 1px solid black;
  font-size: 14px;
  cursor: pointer;
}
/* 左侧添加按钮 */
.main_left_contain_li_button {
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid black;
  cursor: pointer;
}
.main_left_contain_li_button:hover {
  color: lightgreen;
}
/* 右侧 */
.main_right {
  width: 100%;
  flex: 1;
}

.main_right_select_contain {
  margin: 5px 0;
}
.main_right_select_contain_span {
  display: inline-block;
  padding: 2px 10px;
  font-size: 14px;
  margin: 0 10px;
  border: 1px solid black;
  cursor: pointer;
}
.main_right_select_contain_span:nth-child(1) {
  margin-left: 0;
}
.main_right_select_contain_span:hover {
  background-color: lightgray;
}
.spanActive {
  background-color: lightgray;
}

/* 生成 */

.main_right_select_createBtn {
  outline: none;
  background-color: transparent;
  width: 200px;
  margin-top: 16px;
}

.fabu {
  position: relative;
  margin-top: 16px;
}
.main_right_select_fabuBtn {
  outline: none;
  background-color: transparent;
  width: 200px;
}
.main_right_select_duankou {
  position: absolute;
  top: 20px;
  right: 50px;
  border: 1px solid black;
  padding: 10px;
  background-color: #fff;
  display: none;
}

.main_right_select_duankou_item {
  border-bottom: 1px solid black;
  font-size: 14px;
  margin: 5px 0;
  text-align: center;
  cursor: pointer;
  background-color: lightgray;
}

.fabu:hover .main_right_select_duankou {
  display: block !important;
}
</style>
